<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div>
        <div>用户名：<input type="text" id="username"/></div>
        <div>密码：<input type="password" id="password"/></div>
        <div>年龄：<input type="number" id="age"/></div>
        <div>
            <button id="register">注册</button>
        </div>
    </div>

   <div id="userList">
       <table border="1">
           <thead>
           <tr>
               <th>序号</th>
               <th>用户名</th>
               <th>密码</th>
               <th>年龄</th>
           </tr>
           </thead>
           <tbody id="userTbody"></tbody>
       </table>
   </div>

    <script>
        let username = document.querySelector("#username")
        let password = document.querySelector("#password")
        let age = document.querySelector("#age")
        let register = document.querySelector("#register")
        let userTbody = document.querySelector('#userTbody')
        getUserList()

        register.addEventListener('click',function (){
            fetch('/users/register',{
                method:'POST',
                body:JSON.stringify({
                    username:username.value,
                    password:password.value,
                    age:age.value
                }),
                headers:{
                    'Content-type':'application/json'
                },
            }).then(res=>res.json()).then((res)=>{
                getUserList()
            }).catch((err)=>{
                console.log(err)
            })
        })

        function getUserList(){
            fetch('/users/get_user_list',{
                method:'POST',
                headers:{
                    'Content-type':'applications/json'
                },
            }).then(res=>res.json()).then((res)=>{
                let data = res.data.data
                let keyList = ['username','password','age','_id']
                if(data !== undefined && data.length>0){
                    let str = ''
                    data.forEach((item,index)=>{
                       str += `<tr data-id="${item._id}">`
                        str += `<td>${index+1}</td>`
                        keyList.forEach(ele=>{
                            str += `<td>${item[ele]}</td>`
                        })
                        str += `<td><button class="delBtn">删除</button><button class="editBtn">修改</button></td>`
                       str += `</tr>`
                    })
                    userTbody.innerHTML = str
                }
            }).catch(e=>{
                console.log(e)
            })
        }

        // 事件委托 - 在 tbody 上设置监听器来捕捉按钮事件
        userTbody.addEventListener('click', function(e) {
            // 判断是否点击的是删除按钮
            if (e.target.classList.contains('delBtn')) {
                let tr = e.target.closest('tr');
                let id = tr.dataset.id;
                delUser(id)
            }
            // 判断是否点击的是编辑按钮
            else if (e.target.classList.contains('editBtn')) {
                let tr = e.target.closest('tr');
                let id = tr.dataset.id;
                editUser(id)
            }
        });

        function delUser(id){
            fetch('/users/del_user',{
                method:'POST',
                body:JSON.stringify({
                    id:id
                }),
                headers:{
                    'Content-type':'application/json'
                },
            }).then(res=>res.json()).then(res=>{
                getUserList()
            }).catch(e=>{
                console.log(e)
            })
        }

        function editUser(id){
            fetch('/users/edit_user',{
                method:'POST',
                body:JSON.stringify({
                    id:id
                }),
                headers:{
                    'Content-type':'application/json'
                },
            }).then(res=>res.json()).then(res=>{
                getUserList()
            }).catch(e=>{
                console.log(e)
            })
        }
    </script>
</body>
</html>
